<template>
    <div class="ml">
        <div class="aa">
            <p>车辆信息新增</p>
            <span style="position: absolute; right: 1%;top: 10px; font-size: 20px;" @click="centerDialogVisible = true">
                X
            </span>
            <el-dialog v-model="centerDialogVisible" title="提示：" width="30%" align-center>
                <span>您确定要关闭此页面吗？</span>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="centerDialogVisible = false" class="el-button el-button--primary cha">
                            <span class="el-button el-button--primary cha">确定</span>
                        </el-button>
                        <el-button type="primary" @click="centerDialogVisible = false">
                            <span>取消</span>
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <div class="box">
            <div class="bb">
                <p>车主基本信息:</p>
                <el-form label-width="120px" class="form">
                    <el-form-item label="车主姓名：">
                        <el-input style="width: 213px;" v-model="xx.name" />
                    </el-form-item>
                    <el-form-item label="联系方式：">
                        <el-input style="width: 213px;" v-model="xx.tel" />
                    </el-form-item>
                    <el-form-item label="人员性别：">
                        <el-select placeholder="男" v-model="xx.role">
                            <el-option label="男" value="男" />
                            <el-option label="女" value="女" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单位名称：">
                        <el-input style="width: 213px;" v-model="xx.dwname" />
                    </el-form-item>
                    <el-form-item label="所属楼宇：">
                        <el-select placeholder="A1幢" v-model="xx.louyu">
                            <el-option label="A1幢" value="A1幢" />
                            <el-option label="A2幢" value="A2幢" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="房间名称：">
                        <el-input style="width: 213px;" v-model="xx.housename" />
                    </el-form-item>
                    <el-form-item label="人脸照片：">
                        <img src="" alt="">
                    </el-form-item>
                </el-form>
            </div>
            <div class="bb">
                <p>车辆基本信息:</p>
                <el-form label-width="120px" class="form1">
                    <el-form-item label="车辆类型：">
                        <el-select placeholder="临时车" v-model="canshu.vehicle_type">
                            <el-option label="临时车" value="临时车" />
                            <el-option label="包月车" value="包月车" />
                            <el-option label="园区车" value="园区车" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="车辆品牌：">
                        <el-input style="width: 213px;" v-model="canshu.vehicle_brand" />
                    </el-form-item>
                    <el-form-item label="开始时间：">
                        <el-input style="width: 213px;" v-model="canshu.begin_time"
                            placeholder="规定格式:2011-12-22 12:00:00" />
                    </el-form-item>
                    <el-form-item label="车牌号码：" style="position: absolute; right: 25px; top: 25px;">
                        <el-input style="width: 213px;" v-model="canshu.vehicle_num" />
                    </el-form-item>
                    <el-form-item label="车辆型号：" style="position: absolute; right: 25px; top: 75px;">
                        <el-input style="width: 213px;" v-model="canshu.vehicle_model" />
                    </el-form-item>
                    <el-form-item label="结束时间：" style="position: absolute; right: 25px; top: 125px;">
                        <el-input style="width: 213px;" v-model="canshu.end_time" placeholder="规定格式:2011-12-22 12:00:00" />
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="btn">
            <el-button type="primary" @click="addlist"><span class="el-button el-button--primary">保存</span></el-button>
            <el-button type="primary" plain @click="centerDialogVisible = true">取消</el-button>
        </div>
    </div>
</template>

<script  lang="ts" setup>
import { ref } from 'vue'
import service from "@/api/index";
import { ElNotification } from 'element-plus'
import 'element-plus/es/components/notification/style/css'

const centerDialogVisible = ref(false)

var xx = ref({ name: '', tel: '', role: "", dwname: "", louyu: "", housename: "" })
var canshu = ref({ vehicle_type: '', vehicle_num: '', vehicle_brand: "", vehicle_model: "", begin_time: "", end_time: "" })
var addlist = async () => {
    var res = await service.car.carlistadd({
        "beginTime": canshu.value.begin_time,
        "driverId": xx.value.tel,
        "endTime": canshu.value.end_time,
        "vehicleBrand": xx.value.name,
        "vehicleModel": canshu.value.vehicle_model,
        "vehicleNum": canshu.value.vehicle_num,
        "vehicleType": canshu.value.vehicle_type
    })
    

    if (res.status == 200) {

        ElNotification.closeAll()
        ElNotification.success({ message: '添加成功!' })//提示添加成功
    } else {
        ElNotification.closeAll()
        ElNotification.error({ message: '添加失败!' })
    }
}


</script>
<style scoped lang="scss">
.btn {
    width: 150px;
    margin: 0 auto;
    display: flex;
}

.ml {
    height: 100%;
    width: 87%;
    background-color: white;
    position: absolute;
    top: 80px;
    left: 255px;
    z-index: 999;

    .aa {
        border-bottom: 1px solid black;
        height: 40px;
        overflow: hidden;
        padding-left: 10px;
        width: 97%;
        margin: 0 auto;
        position: relative;

        p {
            border-left: 10px solid palevioletred;
            padding-left: 20px;
            margin-top: 10px;

        }
    }
}

.form {
    border: 1px solid black;
    width: 400px;
    height: 550px;
    padding: 25px 0;
    border-radius: 20px;
}

.form1 {
    border: 1px solid black;
    width: 900px;
    height: 550px;
    padding: 25px 0;
    border-radius: 20px;
    position: relative;
}

.bb {
    padding: 25px;


    p {
        padding-bottom: 15px;
    }
}

.box {
    display: flex;
    padding-left: 35px;
}

.jl {
    color: red;
    font-size: 35px;
}
</style>